<!--
 * @Descripttion: 选择运行记录类型
 * @version: 
 * @Author: ye_zhiguo
 * @Date: 2021-08-16 13:42:10
 * @LastEditTime: 2021-08-21 16:14:13
-->
<template>
    <div id="addRecord">
        <!-- <van-nav-bar  title="选择记录类型" left-arrow @click-left="back"/> -->
        <Theader title="选择记录类型" :headerStyle="{color:'#333',backgroundColor: '#fff'}" :textStyle="{color:'#333'}"
            :titleStyle="{color:'#333'}">
            <template slot="header_arrow">
                <van-icon size="17" name="arrow-left" @click="back" />
            </template>
        </Theader>
        <van-search v-model="value" placeholder="记录类型" />
        <div class="padding-outbox">
            <van-tree-select height="100%" :items="recordList" :active-id.sync="activeId"
                :main-active-index.sync="activeIndex" @click-item="getRecordList" />
            <!-- <van-sidebar v-model="activeKey">
                <van-sidebar-item title="交接班及操作记录" />
                <van-sidebar-item title="两票记录" />
                <van-sidebar-item title="异常记录" />
                <van-sidebar-item title="巡视记录" />
                <van-sidebar-item title="其他记录" />
                <van-sidebar-item title="班组管理" />
                <van-sidebar-item title="维护记录" />
            </van-sidebar> -->
        </div>
    </div>

</template>

<script>
    import Theader from "../component/header"
    export default {
        components: {
            Theader
        },
        data() {
            return {
                value: '',   //搜索value
                activeIndex: 3,
                activeId: 1,
                recordList: [{
                    text: '交接班及操作记录',
                    children: [{ text: '交接班及操作记录' }]
                }, {
                    text: '两票记录',
                    children: [{ text: '两票记录' }]
                }, {
                    text: '异常记录',
                    children: [{ text: '异常记录' }]
                }, {
                    text: '巡视记录',
                    children: [{ text: '巡视记录' }, { text: '开关柜局放监测记录', id: Math.random(), }, { text: '油色谱在线监测数据记录', id: Math.random(), },
                    { text: '防小动物措施记录', id: Math.random(), }, { text: '红外测温记录', id: Math.random(), }, { text: '压力检查记录', id: Math.random(), },
                    { text: '设备巡视检测记录', id: Math.random(), }, { text: '蓄电池内阻检测记录', id: Math.random(), }, { text: '收发信机测试记录', id: Math.random(), }]
                }, {
                    text: '其他记录',
                    children: [{ text: '其他记录' }]
                }, {
                    text: '班组管理',
                    children: [{ text: '班组管理' }]
                }, {
                    text: '维护记录',
                    children: [{ text: '维护记录' }]
                },]
            }
        },
        methods: {
            /**
             * @description: 返回
             */
            back() {
                this.$router.push({
                    name: 'dutyHome'
                })
            },
            /**
             * @description: 获取记录回调
             */
            getRecordList(data) {
                console.log(data)
                this.$router.push({
                    name: 'addOperatRecord',
                    params: {
                        recordMsg: data
                    }
                })
            },

        }
    }
</script>

<style>
    #addRecord .van-search {
        background-color: #F5F6F7;
    }

    #addRecord .van-search__content {
        background-color: #fff;
    }

    #addRecord .padding-outbox {
        padding: 10px;
        background-color: #F5F6F7;
        height: calc(100vh - 120px);
        overflow: auto;
    }

    #addRecord .van-tree-select__nav-item {
        text-align: center;
    }

    #addRecord .van-sidebar-item--select,
    .van-sidebar-item--select:active {
        color: #0EB295;
    }

    #addRecord .van-sidebar-item--select::before {
        display: none;
    }
</style>